<template>
	<view class="pay" v-show="showFlag">
		<view class="head"></view>
		<!-- 卡片 -->
		<view class="main_card ">
			<view class="u-relative card0 u-padding-left-30 u-padding-top-48">
				<view class="name u-font-36 u-margin-bottom-22" style="font-weight: 550;">{{name}}</view>
				<view class="weizhi u-font-26">{{address}}</view>
			</view>
			<view :type="'noData'" :nextPage="!nextPage" :isTab="false" :isData="listData.length < 1" :loading="loading"
					  @onRefresh="onRefresh">
					<view style="height: 68vh;">
						  <view v-if="payList.costName == 0">
						    <view style="width: 232px;height: 242px;margin: 110px auto;">
						      <image style="width: 100%;height: 100%;" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/2023-04-07_image/9015d0e9f45344c4007d408cd271f6a.png" mode=""></image>
						    </view>
						    <view style="width: 62%;margin: -66px auto;text-align: center;color: #999;">暂无数据</view>
						  </view>
						<view class="card1" v-show="payList.costName" @click="wuyefei">
							<view style="display: flex;justify-content: space-between;">
								<view>
									<h2>{{payList.costName}}</h2>
								</view>
								<!-- <view class="u-margin-right-30 yjq u-padding-10" style="width: 67px;text-align: center;">
									{{Number(payList.allMoney).toFixed(2)>0?'未结清':'已结清'}}</view> -->
									
									<view :class="Number(payList.allMoney).toFixed(2)>0?'notice-typePu':'notice-typePuTong'">{{Number(payList.allMoney).toFixed(2)>0?'未结清':'已结清'}}</view>
							</view>
							
							<view>缴费期数：{{payList.costNum}}期</view>
							<view>物业费：{{payList.wuyeMoney}}元</view>
							<view>附加物业费：{{payList.fujiaMoney}}元</view>
							<view>违约金：{{payList.weiyueMoney}}元</view>
							<view class="u-flex">
								<view class="u-flex-1">应缴金额：￥{{Number(payList.allMoney).toFixed(2)}}</view>
								
							</view>
						</view>
					<!-- <view class="card2" @click="car(item)" v-for="(item,index) in listData">
						<view>
							<h2>{{item.parking_lot_type == 3 ? '不固定车位费':'车位管理费'}}</h2>
						</view>
						<view>缴费期数：{{item.payment_cycle}}期</view>
						<view>车位位置：{{item.proName}}{{item.parking_lot_name}}{{item.ps_number}}</view>
						<view class="u-flex">
							<view class="u-flex-1">应缴金额：￥{{item.zMoney}}元</view>
							<view class="u-margin-right-30 yjq u-padding-10">{{type}}</view>
						</view>
					</view> -->
			
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import baseApi from '../../api/api.js'
	export default {
		data() {
			return {
				count: 4,
				value: 2,
				name: '',
				address: '',
				showFlag: false,
				payList: {
					costName: '',
					costNum: 0,
					wuyeMoney: 0,
					fujiaMoney: 0,
					weiyueMoney: 0,
					allMoney: 0,
				},
				pageIndex:1,
				loading: false,
				// type: 1,
				nextPage:false,
				listData:[],
			}
		},
		async onShow() {
			this.checkLogin();
			// await this.getPositionList();
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
		},
		onPullDownRefresh() {
			// await this.getPositionList();
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			this.checkLogin();
		},
		methods: {
			// 验证是否登录或实名认证
			checkLogin(){
				this.getPayList()
				let _this = this
				if (uni.getStorageSync('phone')) {
					if (uni.getStorageSync('loginFlag')) {
						if (!uni.getStorageSync('hourseList')) {
							uni.showModal({
								title: '请先进行业主认证',
								showCancel: false,
								confirmText: '确认',
								confirmColor: '#F9A832',
								success: function(res) {
									if (res.confirm) {
										_this.$Router.push({
											path: '/my/address/address'
										})
									}
								}
							});
							this.$openInvite()
						} else {
							_this.showFlag = true
							_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							_this.name = _this.homelist.proName;
							_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
									_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode
							_this.getPayList()
						}
					} else {
						uni.showModal({
							title: '请先实名认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/homePage1/realName/realName'
									})
								}
							}
						});
					}
				} else {
					uni.showModal({
						title: '请先登录',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								console.log('a')
								_this.$Router.pushTab({
									path: '/pages/user/user'
								})
							}
						}
					});
				}
				uni.stopPullDownRefresh();

			},
			onRefresh() {
				if (!this.nextPage) {
					this.pageIndex = this.pageIndex + 1;
					this.getPositionList();
				}
			},
			async getPayList() {
				uni.showLoading({
					title: '加载中'
				});
				let res = await this.$request.api.getPayList({
					// proId: this.homelist.proId,
					// roomId: this.homelist.roomId,
					// setId: this.homelist.setId,
					proId: this.homelist.proId,
					
					roomId: this.homelist.roomId,
					setId: this.homelist.setId,
				})
				console.log(res)
				this.payList = res.data.data
				uni.hideLoading();
			},
			getPositionList() {
				console.log(this.pageIndex,'pageindex')
				if (this.pageIndex < 2) {
					uni.showLoading({
						title: '加载中'
					});
				}
				this.loading = false;
				this.$request.api.getMyPosition({
					appYeZhu2:1,
					pageIndex: this.pageIndex,
					room_id:this.homelist.roomId
				}).then(res => {
					console.log(res)
					if (this.pageIndex == 1) {
						this.listData = res.data.data.datalist || [];
					} else {
						this.listData = [...this.listData, ...res.data.data.datalist];
					}
					console.log(this.listData)
					this.nextPage = res.data.data.isEndPage
					this.loading = true;
					uni.hideLoading();

				})
				console.log(this.nextPage)
			},
			wuyefei() {
				uni.navigateTo({
					url: '/pages/wuyepay/wuyepay'
				});
			},
			car(item) {
				uni.navigateTo({
					url: '/homePage1/positionDetail/positionDetail?id='+item.id+'&spaceType='+item.parking_lot_type+'&proName='+item.proName+'&parking_lot_name='+item.parking_lot_name+'&ps_number='+item.ps_number+'&driving_number='+item.driving_number
				});
			},
			dianji() {
				var data = {
					access_token: '1234ABD1234ABD',
					oauth_consumer_key: '12345',
					openid: 'B08D412EEC4000FFC37CAABBDC1234CC',
					format: 'json'
				}
				baseApi.postcaty(data).then(res => {})
			}
		}
	}
</script>

<style scoped lang="scss">
	.notice-typePu {
		color: rgb(255, 255, 255);
		background: linear-gradient(90deg, #ebb15ddb 0%, #f9a832 100%);
		padding: 10rpx 22rpx;
		text-align: center;
		border-bottom-right-radius: 22rpx;
		border-top-left-radius: 22rpx
	}
	
	.notice-typePuTong {
		color: rgb(255, 255, 255);
		background: linear-gradient(90deg, #00aa00 0%, #55aa00 100%);
		padding: 10rpx 22rpx;
		text-align: center;
		border-bottom-right-radius: 22rpx;
		border-top-left-radius: 22rpx
	}
	.head {
		height: 184rpx;
		// background-color: #427705;
		background:linear-gradient(150deg, #549D00 0%, #417505 100%);
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
	}

	.card0 {
		height: 220rpx;
		border-radius: 6px;
		box-shadow: 0px 3px 40rpx 0px rgba(0, 0, 0, 0.1);
		top: -100rpx;
		background-color: #fff;
		// z-index: 99999;
	}

	.card1 {
		height: auto;
		border-radius: 6px;
		background:#ffffff ;
		box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
		padding: 40rpx;
		padding-bottom: 20rpx;
		view {
			margin-bottom: 20rpx;
			// color: #fff;
		}
	}

	.card2 {
		height: 300rpx;
		border-radius: 6px;
		background: linear-gradient(150deg, rgba(144, 144, 144, 1) 0%, rgba(85, 85, 85, 1) 100%);
		box-shadow: 0px 3px 40rpx 0px rgba(51, 51, 51, 0.2);
		margin-top: 46rpx;
		padding-top: 40rpx;
		padding-left: 40rpx;

		view {
			margin-bottom: 20rpx;
			color: #fff;
		}
	}
	.car2:last-child{
		margin-bottom: 100rpx;
	}

	.main_card {
		padding: 0 30rpx;
	}

	.yjq {
		border: 1px solid #fff;
		border-radius: 6px;
		box-sizing: border-box;
	}
</style>
